<template>
	<view>
		<view>屏幕宽高{{info.screenWidth}},{{info.screenHeight}}</view>
		<view>系统 {{info.osName}}</view>
		<view>品牌 {{info.model}}</view>
		<view>brand {{info.brand}}</view>
		<view>可使用的窗口顶部位置 {{info.windowTop}}</view>
		<view>安全区域 {{JSON.stringify(info.safeArea)}}</view>
		<view>安全区域 {{JSON.stringify(info.safeAreaInsets)}}</view>
		<!-- #ifdef MP -->
		<view>胶囊微信小程序</view>
		<view>导航栏高度{{(menuButtonInfo.top-info.statusBarHeight)*2+menuButtonInfo.height}}</view>
		<view>胶囊{{JSON.stringify(menuButtonInfo)}}</view>
		<!-- #endif -->
		<view>图片操作</view>
		<view>选择与预览图片</view>
		<button @click="selectPic">选择</button>
		<view v-for="item in list" :key="item" @click="preview(item)">
			<image :src="item"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				info:{},
				menuButtonInfo:{}
			}
		},
		onLoad() {
			//获取系统信息
			var info=uni.getSystemInfoSync();
			this.info=info;
			console.log(this.info);
			//存储api
			uni.setStorageSync("info",info);
			//获取胶囊按钮的边界
			let menuButtonInfo=uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo=menuButtonInfo;
			console.log(menuButtonInfo);
		},
		methods: {
			preview(item){
				var that=this;
				//单击图片实现预览
				uni.previewImage({
					//预览的图片列表
					urls:this.list,
					current:item,//当前图片
					longPressActions:{
						//定义长按按钮
						itemList:['发送给朋友','保存图片','收藏'],
						success:function(data){
							console.log('选中了第'+(data.tapIndex+1)+'个按钮，第'+(data.index+1)+'张图片');
							//保存
							if(data.tapIndex==1){
								//保存到本地相册
								uni.saveImageToPhotosAlbum({
									filePath:that.list[data.index],
									success() {
										uni.showToast({
											title:"保存成功"
										})
									}
								})
							}
							//分享
							if(data.tapIndex==0){
								//分享给朋友 （app打包时候分享要去微信的开发平台注册）
								uni.share({
									provider:"weixin",
									scene:"WXSceneSession",
									type:2,
									imageUrl:that.list[data.index],
									success:function(res){
										console.log("success:"+JSON.stringify(res));
									},
									fail:function(err){
										console.log("fail:"+JSON.stringify(err));
									}
								})
							}
						},
						fail:function(err){
							console.log(err.errMsg);
						}
					}
				})
			},
			selectPic(){
				var that=this;
				//选择图片
				uni.chooseImage({
					count:3,//默认选3张
					success(res){
						//遍历结果的
						for(let i=0;i<res.tempFilePaths.length;i++){
							//上传图片
							uni.uploadFile({
								//上传地址
								url:'http://520mg.com/ajax/file.php',
								//图片信息
								filePath:res.tempFilePaths[i],
								//name需要和后端约定，默认都会叫file
								name:'file',
								success:result=>{
									//转换为json 
									var data=JSON.parse(result.data);
									//添加域名后加入list 
									that.list.push("http://520mg.com"+data.pic);
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>
